<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>ubox 请输入提取码</title>
    <style type="text/css">
        .content{
            display: flex;
            justify-content:center;
            align-items:Center;
            background-color: #EEF2F6;
            height: 700px;
        }
        .logo{
            font-size: 50px;
            width: 460px;
            height:100px;
            margin-left: 40%
        }
        .password{
            width: 460px;
            height: 250px;
        }
        .password_header{
            height: 82px;
            line-height: 82px;
            background-color: #438AEE;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
            font-size: 14px;
            color: white;
        }
        .password_body{
            height: 168px;
            background-color: white;
            display: flex;
            align-items: center;
        }
        .password_input{
            border: 1px solid #f2f2f2;
            padding: 8px 10px;
            height: 19px;
            line-height: 19px;
            background: #f2f2f2;
            border-radius: 4px;
            width: 280px;
            margin-top: 15px;
        }
        .password_button{
            cursor:pointer;
            background-color: #4E97FF;
            text-align: center;
            color: white;
            border-radius: 4px;
            margin-left: 14px;
            height: 36px;
            width: 78px;
            line-height: 36px;
            border: 1px solid #3b8cff;
            display: inline-block;
            margin-top: 15px;
        }
        .back_img{
            background-image: url('../image/password_back.png');
            background-repeat:no-repeat;
            background-size:100% 100%;
            height: 250px;
            position: absolute;
            bottom: 0%;
            width: 100%;
        }
        .avalar_image{
            margin-left: 5px;
            width: 50px;
            height: 50px;
            display: block;
            border-radius: 100px;
            border: 3px solid #d9e2ea;
            margin-top: 14px;
        }
    </style>
</head>
<body>
<div class="back_img"></div>
<div>
    <div class="content">
        <div class="password">
            <div class="logo">logo</div>
            <div class="password_header">
                <div style="float: left;margin-left: 30px">
                    <!--/*@thymesVar id="userHead" type=""*/-->
                    <img class="avalar_image" th:src="${userHead}" alt="">
                </div>
                <div style="float: left;margin-left: 20px;font-weight: bold;">
                    <!--/*@thymesVar id="userName" type=""*/-->
                    <span th:text="${userName}"></span>
                </div>
                <span>&nbsp;&nbsp;给您分享了加密文件</span>
            </div>
            <div class="password_body">
                <div style="padding: 30px;color: #5b667b;font-size: 14px">
                    <div>
                        请输入提取码：
                    </div>
                    <div style="float: left;">
                        <input class="password_input" id="password_input" type="" name="">
                    </div>
                    <div style="float: left;">
                        <a class="password_button" onclick="getFile()" title="提取文件">提取文件</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script th:inline="javascript">
    var key = [[${key}]];
</script>
<script type="text/javascript">
    function getFile(){
        var pasword = document.getElementById("password_input").value
        if(pasword && pasword.length > 0) {
            document.getElementById("password_input").value = ''
            var xhr = new XMLHttpRequest();
            //key可以从thymeleaf中获取，
            xhr.open("POST", "/share/" + key, true);
            xhr.setRequestHeader("Content-Type", "application/json;charset=utf-8");
            xhr.onreadystatechange = function () { // Call a function when the state changes.
                if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
                    // Request finished. Do processing here.
                    var result = JSON.parse(xhr.responseText)
                    if(result && result.code && result.code === 200){
                        console.log(result.data)
                    }else{
                        alert(result.errMsg)
                    }
                }
            }
            xhr.send(JSON.stringify({"password": pasword}));
        }else{
            alert('密码为空！')
        }
    }
</script>
</html>